<style>
    body{background: #4d4d4d}
    .item{height: 2.4rem;width: 7.1rem;margin:0.2rem auto;border-radius: 7px;}
    .addcard{height: 1rem;width: 7.1rem;background: #fff;margin: 0 auto;border-radius: 7px;font-size: 0.32rem;}
    .addcard .icon{margin-right: 0.2rem;font-size: 0.5rem;color: #5391ca;}
    .itemhead{height: 1.74rem;border-radius: 7px 7px 0 0;color: #fff;padding: 0.2rem 0 0 0;}
    .logo{height: 0.65rem;width: 0.65rem;border-radius: 50%;background: #fff;text-align: center;margin-left: 0.32rem;}
    .logo img{width: 0.45rem;height: auto;margin-top: 0.1rem;}
    .name{margin-left: 0.2rem;font-size: 0.32rem;}
    .manage{height: 0.44rem;width: 1.8rem;color: #76db51;line-height: 0.44rem;border-radius: 3px;margin-top: -0.1rem;}
    .cradNo p{font-size: 0.46rem;line-height: 0;}
    .itembut{color: #fff;margin-top: 0.05rem;}
    /*默认样式*/
    .cardbg-default{background: linear-gradient(to right, #f1e47b, #d3c79d);}
    .cardtop-default{background: linear-gradient(to right, #ebd954, #c0b178);}
    /*招商*/
    .cardbg-zs{background: linear-gradient(to right, #c93441, #c24c56);}
    .cardtop-zs{background: linear-gradient(to right, #ee828d, #e80b22);}
    /*建设*/
    .cardbg-js{background: linear-gradient(to right, #365a97, #174798);}
    .cardtop-js{background: linear-gradient(to right, #5d7db2, #033586);}
    /*邮政*/
    .cardbg-yz{background: linear-gradient(to right, #095651, #1a8e87);}
    .cardtop-yz{background: linear-gradient(to right, #48b2ac, #046b65);}
    /*工商*/
   .cardbg-gs{background: linear-gradient(to right, #c93441, #c24c56);}
   .cardtop-gs{background: linear-gradient(to right, #ee828d, #e80b22);}
   /*光大*/
   .cardbg-gd{background: linear-gradient(to right, #760376, #8f1c8f);}
   .cardtop-gd{background: linear-gradient(to right, #a743a7, #8b058b);}
   /*浦发*/
  .cardbg-pf{background: linear-gradient(to right, #093369, #103d77);}
  .cardtop-pf{background: linear-gradient(to right, #3972bb, #06428e);}
  /*平安*/
  .cardbg-pa{background: linear-gradient(to right, #a32105, #b83a1e);}
  .cardtop-pa{background: linear-gradient(to right, #e0725a, #ba2707);}
  /*民生*/
  .cardbg-ms{background: linear-gradient(to right, #037643, #023b21);}
  .cardtop-ms{background: linear-gradient(to right, #01A55C, #03522f);}
</style>
<div class="container" id="bankCardbox"></div>
<script type="text/html" id="teamlate_bankCardbox">
	<ul class="cardlist">
	<% for(var i in data){ %>
	<li class="item <%= data[i].bankbg %>" data-phoneno="<%= data[i].phoneNo %>" data-batchno="<%= data[i].batchNo %>" data-isopen="<%= data[i].isOpenQuick %>" data-startdate="<%= data[i].startDate %>" data-enddate="<%= data[i].endDate %>" data-bankcardid="<%= data[i].bundCardId %>" data-start = "<%= data[i].isHavePlan %>" data-order="<%= data[i].id %>" data-bundcardid="<%= data[i].bundCardId %>">
		<div class="itemhead <%= data[i].banktop %>">
			<div class="bankname flex flex-align-center">
				<div class="logo">
					<img src="<%= data[i].bankIcon %>" />
				</div>
				<div class="name flex-1"><%=data[i].bankName%></div>
				<%if(data[i].isHavePlan != 0){%>
				<div class="manage flex flex-pack-center flex-align-center">
					<i class="icon iconfont icon-shizhong" style="margin-right:0.05rem;font-size: 0.36rem;font-weight: bold;margin-bottom: -2px;"></i>
					<p>进行中</p>
				</div>
				<%}%>
			</div>
			<div class="cradNo flex flex-align-center flex-pack-center">
				<p><%=data[i].cardNo%></p>
			</div>
		</div>
		<div class="itembut flex flex-align-center flex-pack-center">
			<%if(data[i].isHavePlan == 0){%>
			<p class="flex-1" style="margin-left: 0.2rem;">添加还款计划</p>
			<%}else{%>
			<p class="flex-1" style="margin-left: 0.2rem;">查看还款计划</p>
			<%}%>
			<i class="icon iconfont icon-you" style="margin-right: 0.2rem;"></i>
		</div>
	</li>
	<%}%>
	</ul>
	<!--添加信用卡-->
	<div class="addcard flex flex-align-center flex-pack-center">
		<i class="icon iconfont icon-tianjia"></i>
		<p>添加信用卡</p>
	</div>
	<!--底部菜单-->
	<div style="height: 1.8rem;"></div>
	    <div class="footer flex flex-align-center flex-pack-center">
	        <div class="cord flex flex-v flex-1">
	        	<a href="#cardlist" class="active">
				<i class="icon iconfont icon-qia"></i>
				<p>我的信用卡</p>
				</a>
	        </div>
			<div class="plan flex flex-v flex-1">
				<a href="#plan">
				<i class="icon iconfont icon-icon-text-fn-historyrecord" style="font-size: 0.5rem;"></i>
				<p>还款计划</p>
				</a>
		</div>
	</div>
</script>
